<template>
	<div id="my">
		<div class="user">
			<van-image
			  width="100%"
			  height="8rem"
			  src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3935287532,2996605224&fm=26&gp=0.jpg"
			/>
			<div class="user_box">
				<div class="box_top">
					<div class="user_img"><van-image width="100%" height="100%" round :src="img" /></div>
					<div class="user_name">往事随风</div>
					<div class="user_phone"><van-icon name="phone-o" size="18" />134****8887</div>
				</div>
				<div class="box_bottom">
					<div class="myorder">
						<p class="myorder_left">我的订单</p>
						<p class="myorder_right" @click="order(0)">查看全部订单<van-icon name="arrow" /></p>
					</div>
					<van-tabbar  style="position: absolute;bottom: auto;height: 1.3333rem;" :border="false" route>
					  <van-tabbar-item icon="paid" badge="2" @click="order(1)">待支付</van-tabbar-item>
					  <van-tabbar-item icon="logistics" @click="order(2)">待收货</van-tabbar-item>
					  <van-tabbar-item icon="chat-o" badge="1" @click="order(3)">待评价</van-tabbar-item>
					  <van-tabbar-item icon="after-sale" badge="1" @click="order(4)">退款/售后</van-tabbar-item>
					</van-tabbar>
				</div>
			</div>
		</div>
		<div class="other">
			<p>常用功能</p>
			<van-tabbar  style="position: absolute;bottom: 1.8666rem;height: 1.3333rem;" :border="false" route>
			  <van-tabbar-item icon="balance-pay" to="/coupon" badge="2">优惠券</van-tabbar-item>
			  <van-tabbar-item icon="location-o" to="/addressc">收货地址</van-tabbar-item>
			  <van-tabbar-item icon="shop-o">招商加盟</van-tabbar-item>
			  <van-tabbar-item icon="setting-o" to="/setup">设置</van-tabbar-item>
			</van-tabbar>
			<van-tabbar  style="position: absolute;bottom: 0.3666rem;height: 1.3333rem;" :border="false" route>
			  <van-tabbar-item icon="label-o" to="/help">帮助与反馈</van-tabbar-item>
			  <van-tabbar-item icon="gift-o" @click="exchange">兑换码</van-tabbar-item>
			  <van-tabbar-item icon="point-gift-o" to="/recommend">邀请有礼</van-tabbar-item>
			  <van-tabbar-item icon="volume-o" to="/notice">平台须知</van-tabbar-item>
			</van-tabbar>
		</div>
		<van-popup v-model="show" round position="bottom" closeable :style="{ height: '30%' }">
			<p style="width: 100%;height: 25%;background-color: #F0F0F0;line-height: 1.4666rem; font-size: 0.4333rem;text-align: center;">兑换优惠</p>
			
			<div style="margin: 0.8rem;width: 80%;height: 4rem;">
				<input type="text" placeholder="请输入兑换码" style="border-radius: 1.3333rem;width: 100%;height: 25%;background: #F0F0F0;border: none;padding-left: 1.0666rem;">
				<van-button round style="margin-top: 0.2666rem;width: 100%;background-color: #ADD8E6;color: white;">确定</van-button>
			</div>
		</van-popup>
		<tabbar></tabbar>
	</div>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	export default {
		name: 'my',
		data(){
			return{
				show: false,
				img: require('@/assets/user.png')
			}
		},
		components:{
			tabbar
		},
		methods:{
			exchange(){
				this.show = true
			},
			order(i){
				this.$router.push({path:'/order',query:{num:i}});
			}
		}
	}
</script>

<style scoped="scoped">
#my{
	width: 100%;
	height: 100vh;
}
.user{
	width: 100%;
	height: 8rem;
}
.user_box{
	width: 93%;
	height: 5.3333rem;
	position: absolute;
	top: 5.3333rem;
	margin: 0 0.3666rem;
	background-color: white;
	border-radius: 0.2666rem;
}
.box_top{
	width: 100%;
	height: 2.3333rem;
}
.user_img{
	width: 2.3333rem;
	height: 2.3333rem;
	margin: -0.5333rem 0 0 0.5rem;
	float: left;
}
.user_name{
	width: calc(100vw - 4.533rem);
	font-size: 0.5333rem;
	margin: 0.2rem 0 0 0.2666rem;
	float: left;
}

.user_phone{
	float: left;
	margin: 0.05rem 0 0 0.2666rem;
	font-size: 0.31rem;
}
.user_phone i{
	top: 0.1266rem;
}
.box_bottom{
	width: 100%;
	height: 2rem;
}
.myorder{
	width: 100%;
	height: 0.6666rem;
	font-size: 0.4533rem;
	padding: 0 0.2833rem;
}
.myorder_left{
	float: left;
	font-weight: bold;
}
.myorder_right{
	float: right;
	font-size: 0.2533rem;
	line-height: 0.6866rem;
}
.myorder_right i{
	top: 0.0266rem;
}
.other{
	width: 93%;
	height: 4.3333rem;
	position: absolute;
	top: 11.3333rem;
	margin: 0 0.3666rem;
	padding: 0 0.2833rem;
	background-color: white;
	border-radius: 0.2666rem;
}
.other p{
	float: left;
	font-weight: bold;
	font-size: 0.4533rem;
	height: 1.1666rem;
	line-height: 1.1666rem;
}
</style>
